<template>
  <div class="login-inner-box">
    <p class="fs-32 bold font333 pdt-40 mt-40 mb-40 tac pdb-40">在线巡课平台</p>
    <div class="login-form df fdc aic">
      <van-form @submit="handleSubmit" class="fs-32">
        <van-cell-group inset>
          <div class="field-outer">
            <van-field
              class="fs-28"
              v-model="formInline.username"
              name="账号"
              placeholder="请输入账号"
              :rules="[{ required: true, message: '请填写账号' }]"
            />
          </div>
          <div class="pdt-24 pdb-24"></div>
          <div class="field-outer">
            <van-field
              class="fs-28"
              v-model="formInline.password"
              type="password"
              name="密码"
              placeholder="请输入密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
          </div>

          <div class="pdt-24 pdb-24"></div>
          <van-field
            name="radio"
            class="van-login-field"
            label=""
            :rules="[{ required: true, message: '请选择隐私', trigger: 'onChange' }]"
          >
            <template #input>
              <van-radio-group v-model="formInline.checked" direction="horizontal">
                <van-radio icon-size="20" class="fs-28 pdb-24 pdt-24 font666 mr-24" name="1">
                  <span class="font666">教职工</span>
                </van-radio>
                <van-radio icon-size="20" class="fs-28 pdb-24 pdt-24" name="2">
                  <span class="font666">学生</span>
                </van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <div class="pdt-40 df aic">
            <van-field
              class="van-login-field"
              name="radio"
              label=""
              :rules="[{ required: true, message: '勾选同意隐私条款', trigger: 'onChange' }]"
            >
              <template #input>
                <van-radio-group
                  class="df aic"
                  v-model="formInline.clause"
                  direction="horizontal"
                  :rules="[{ required: true, message: '请选择隐私' }]"
                >
                  <van-radio
                    icon-size="20"
                    class="fs-24 pdb-24 pdt-24"
                    name="3"
                    shape="square"
                  ></van-radio>
                  <p class="mr-24 font666 fs-24">阅读并同意《隐私条款》</p>
                </van-radio-group>
              </template>
            </van-field>
          </div>
        </van-cell-group>
        <div class="bottom-btn">
          <van-button class="fs-28 pdt-40 pdb-40" block type="primary" native-type="submit">
            登录
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive, ref, toRefs, computed } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { useStore } from '@/store';
  import { Notify, Popup } from 'vant';
  import { SButton } from '@/components/button/index';

  export default defineComponent({
    name: 'Login',
    components: {
      Popup,
      Notify,
      SButton,
    },
    setup() {
      const state = reactive({
        loading: false,
        checked: false,
        formInline: {
          username: '',
          password: '',
          checked: '',
          clause: '',
        },
      });

      const store = useStore();
      const router = useRouter();
      const route = useRoute();

      const inputRef: any = ref(null);

      const handleSubmit = async () => {
        const { username, password, checked, clause } = state.formInline;

        state.loading = true;

        const params = {
          name: username,
          phone: password,
          checked: checked,
          clause: clause,
        };
        console.log(params);
        const { code, error: msg } = await store.dispatch('user/login', params).finally(() => {
          state.loading = false;
        });
        if (code == '10000') {
          const toPath = decodeURIComponent((route.query?.redirect || '/') as string);
          Notify({ type: 'success', message: '登录成功！', duration: 1 });
          router.replace(toPath).then((_) => {
            if (route.name == 'login') {
              router.replace('/');
            }
          });
        }
      };
      return {
        ...toRefs(state),
        inputRef,
        handleSubmit,
      };
    },
  });
</script>

<style lang="scss" scoped>
  .login-inner-box {
    padding: 48px 32px;
    font-size: 32px;
    .title {
      width: 420px;
      height: 84px;
    }
  }
  .field-outer {
    width: 622px;
    height: 96px;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
  }
  .bottom-btn {
    margin: 16px;
    height: 96px;
    // width: 686px;
  }
</style>
